<template>
	
	
	<div id="main_page">
		<!-- <button @click="login()">登录</button> -->
		<div class="header">
			<div id="left">
			<i class="el-icon-s-shop"></i>
			<span id="name" > 后台管理系统</span>
			</div>
			<div id="right">
			<i class="el-icon-user-solid"></i>
			<span v-text="username" style="padding: 0 10px 0 10px;">{{username}}</span>
			<el-button type="danger" size="mini" @click="logout()">登出</el-button>
			</div>
		</div>
		<el-tabs tab-position="left">
			<el-tab-pane label="设备管理">
				<equipment></equipment>
			</el-tab-pane>
			<el-tab-pane label="产品管理">
				<commodity></commodity>
			</el-tab-pane>
			<el-tab-pane label="订单管理">
				<order></order>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
	import commodity from "./commodity.vue"
	import equipment from "./equipment.vue";
	import order from './order.vue'
	export default {
		name: "main_page",
		components: {
			equipment,
			commodity,
			order
		},
		data() {
			return {
				username:""
			};
		},
		mounted() {
			//登录
			//获取用户名
			var that=this;
			this.axios({
				method:"post",
				url:"http://47.115.152.5:8080/admin/get_admin_info.do",					
				withCredentials:true,
			}).then(function(res){
				
				that.username=res.data.data.username;
			});
		},
		methods: {
			
			//登出
			logout(){
				var that=this;
				this.axios({
					method:"post",
					url:"http://47.115.152.5:8080/admin/logout.do",					
					withCredentials:true,
				}).then(function(res){
					// console.log();
					console.log(res);
					that.$router.push({
						name: 'login'
					})
				});
			}
		},
		
		
		}
</script>

<style>
.header{
	/* border:2px solid #429efd; */
	border-bottom: 2px solid #429efd;
	/* argin: 0 0 0 0; */
	width: 100%;
	height: 50px;
	/* background-color: bisque; */
}
#left{
	margin: 15px 0 0 15px  ;
	float: left;
	font-size: 15px;
}
#name{
	font-size: 15px;
}
#right{
	margin: 15px  15px 0 0   ;
	float: right;
	font-size: 15px;
}
body{
	margin: 0;
	padding: 0;
}
</style>
